<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :stripe="true"
      :default-sort="{prop: 'generatedDate', order: 'descending'}"
    >
      <el-table-column
        prop="roadID"
        label="道路编号"
        align="center"
        sortable
      />
      <el-table-column
        prop="roadName"
        label="道路名称"
        align="center"
        width="180"
      />
      <el-table-column
        label="平整度检测情况"
        align="center"
        min-width="105"
      >
        <template slot-scope="{row}">
          <el-tag :type="row.flatnessID!=null ? 'success': 'danger'">{{ row.flatnessID!=null? '已登记' : '未登记' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="损坏情况检测情况"
        align="center"
        min-width="105"
      >
        <template slot-scope="{row}">
          <el-tag :type="row.pavementDamageComID != null ? 'success': 'danger'">{{ row.pavementDamageComID != null? '已登记' : '未登记' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="generatedTime"
        label="生成时间"
        align="center"
        sortable
        min-width="105"
      />

      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleEdit(row)"
          />
          <el-popconfirm
            v-if="roles[0]==='1'"
            title="该操作不可逆确定删除？"
            @onConfirm="deleteRegularInspection(row.regularInspectionID)"
          >
            <el-button slot="reference" size="small" type="danger" icon="el-icon-delete" circle />
          </el-popconfirm>
          <el-button type="info" size="small" icon="el-icon-more" circle @click="handleInfo(row)" />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="60%"
      length="100%"
      :destroy-on-close="true"
    >
      <InfoDetail :data="info" @close-dialog="dialogVisible=false" @saved="saved" />
    </el-dialog>
  </div>

</template>

<script>
import {
  deleteRegularInspection,
  regularInspectionPlan,
  searchPavementDamage
} from '@/api/regularInspection'
import { searchPavementFlatness } from '@/api/regularInspection'
import { mapGetters } from 'vuex'
import InfoDetail from '@/views/regular-inspection/components/InfoDetail'
export default {
  components: {
    InfoDetail
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      info: {
        isInfo: '',
        regularInspectionId: '',
        flatnessId: null,
        flatnessInspectDate: null,
        IRI: null,
        flatnessRemarks: null,
        flatnessinspector: null,
        flatnessinspectorId: null,
        damageComId: null,
        damageId: null,
        damageInspectDate: null,
        beginSite: null,
        totalLength: null,
        totalWidth: null,
        damageTypeId: null,
        damageType: null,
        damageHeight: null,
        damageLength: null,
        damageWidth: null,
        desc: null,
        damageInspector: null,
        damageInspectorId: null,
        damageArea: null,
        damageDensity: null,
        damageRemarks: null,
        individualScore: null
      },
      variableDepartmentId: ''
    }
  },
  computed: {
    ...mapGetters([
      'departmentId',
      'userId',
      'roles'
    ])
  },
  created() {
    this.getAllRegularInspection()
  },
  methods: {
    getAllRegularInspection() {
      this.variableDepartmentId = this.departmentId
      if (this.variableDepartmentId === 1) {
        this.variableDepartmentId = null
      }
      regularInspectionPlan({ departmentID: this.variableDepartmentId }).then(response => {
        this.tableData = response
        this.tableData.forEach(
          function adjustFormat(item) {
            const date = item.generatedTime
            item.generatedTime = [date.year, date.monthValue, date.dayOfMonth].join('-')
          }
        )
        this.$message.success('已刷新定期巡检计划表')
      })
    },
    saved() {
      this.getAllRegularInspection()
    },
    handleInfo(row) {
      this.info.isInfo = true
      this.info.regularInspectionId = row.regularInspectionID
      this.setBasicInfo(row.roadID, row.roadName, row.generatedTime)
      this.setFlatnessInfo(row.flatnessID)
      this.setDamageInfo(row.pavementDamageComID)
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.info.isInfo = false
      this.info.regularInspectionId = row.regularInspectionID
      this.setBasicInfo(row.roadID, row.roadName, row.generatedTime)
      this.setFlatnessInfo(row.flatnessID)
      this.setDamageInfo(row.pavementDamageComID)
      this.dialogVisible = true
    },
    setBasicInfo(roadId, roadName, generatedTime) {
      this.info.roadId = roadId
      this.info.roadName = roadName
      this.info.generatedTime = new Date(generatedTime)
    },
    setFlatnessInfo(flatnessID) {
      if (flatnessID != null) {
        searchPavementFlatness({ flatnessID: flatnessID }).then(response => {
          this.info.flatnessId = flatnessID
          this.info.flatnessInspectDate = new Date([response.flatnessDate.year,
            response.flatnessDate.monthValue,
            response.flatnessDate.dayOfMonth].join('-'))
          this.info.IRI = response.iri
          this.info.flatnessRemarks = response.remarks
          this.info.flatnessinspector = response.userName
          this.info.flatnessinspectorId = response.userID
        })
      } else {
        this.info.flatnessId = null
        this.info.flatnessInspectDate = null
        this.info.IRI = null
        this.info.flatnessRemarks = null
        this.info.flatnessinspector = null
        this.info.flatnessinspectorId = null
      }
    },
    setDamageInfo(pavementDamageComID) {
      if (pavementDamageComID != null) {
        searchPavementDamage({ pavementDamageComID: pavementDamageComID }).then(response => {
          this.info.damageComId = pavementDamageComID
          this.info.damageInspectDate = new Date([response[0].inspectionDate.year,
            response[0].inspectionDate.monthValue,
            response[0].inspectionDate.dayOfMonth].join('-'))
          this.info.beginSite = response[0].saeplace
          this.info.totalLength = response[0].totalLength
          this.info.totalWidth = response[0].totalWidth
          this.info.damageType = response[0].damageTypeName
          this.info.damageTypeId = response[0].damageTypeID
          this.info.damageHeight = response[0].damageHeight
          this.info.damageLength = response[0].damageLength
          this.info.damageWidth = response[0].damageWidth
          this.info.desc = response[0].damagePAC
          this.info.damageId = response[0].damageID
          this.info.damageInspector = response[0].userName
          this.info.damageInspectorId = response[0].inspectorID
          this.info.damageArea = response[0].inspectionArea
          this.info.damageDensity = response[0].damageDensity.toFixed(2)
          this.info.damageRemarks = response[0].remarks
          this.info.individualScore = response[0].individualScore
        })
      } else {
        this.info.damageComId = null
        this.info.damageId = null
        this.info.damageInspectDate = null
        this.info.beginSite = null
        this.info.totalLength = null
        this.info.totalWidth = null
        this.info.damageType = null
        this.info.damageHeight = null
        this.info.damageLength = null
        this.info.damageWidth = null
        this.info.desc = null
        this.info.damageInspector = null
        this.info.damageInspectorId = null
        this.info.damageArea = null
        this.info.damageDensity = null
        this.info.damageRemarks = null
        this.info.individualScore = null
      }
    },
    deleteRegularInspection(id) {
      deleteRegularInspection({ regularInspectionID: id }).then(() => {
        this.getAllRegularInspection()
        this.$message.success('删除成功')
        this.$notify.warning({
          title: '警告',
          message: '您刚刚删除了一条无法恢复的记录',
          duration: 0
        })
      })
    }
  }
}
</script>
